<!-- 通关服务组件 -->
<template>
    <view class="car-type-select">
        <picker @change="bindPickerChange" :value="index" :range="CardTypes" range-key="name">
            <view class="u-flex u-flex-center">
                <view class="uni-input">{{ confirmText }}</view>
                <image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png" mode="">
                </image>
            </view>
        </picker>
    </view>
</template>
<script>
export default {
    props: ['text'],
    data () {
        return {
            lang: this.$i18n.locale,
            index: 0,
            CardTypes: [{
                id: '1',
                name: this.$t('报关'),
            }, {
                id: '2',
                name: this.$t('清关'),
            }, {
                id: '3',
                name: this.$t('报关+清关'),
            }],
        }
    },
    mounted () {
    },
    computed: {
        confirmText () {
            //如果 this.text 是对象 或者 是 '1' 或者 '2' 或者 '3' 则根据 this.CardTypes 进行回显 ,否则返回 this.text
            if (typeof this.text === 'object' || this.text === '1' || this.text === '2' || this.text === '3') {
                return this.CardTypes.find(item => item.id === this.text).name
            }
            return this.text
        }
    },
    watch: {
        id: 'handeleActionSheetList'
    },
    methods: {
        bindPickerChange (e) {
            this.index = e.target.value;
            this.$emit('change', this.CardTypes[this.index]);
        }
    },
}
</script>

<style lang="less" scoped>
.car-type-select {
    width: 100%;
    height: 100%;

    .uni-input {
        color: #999999;
    }
}
</style>
